<template>
  <!-- 2.准备具有大小的DOM容器 -->
  <div>
    <div
      class="echart-box"
      id="paperYearCount"
      :style="{width: '100%' , height: '500px',background:'#ffffff'}"
    ></div>
  </div>
</template>


<script>
import {yearCount} from  "@/api/echarts/echart";

var that = this;
export default {
  name: "system",
  data() {
    return {
      // 定义图表，各种参数
      msg: "柱状图",
      datay: [],
      xdata:[]
    };
  },
  mounted: function () {
    this.drawLineByYear(); //按照默认值绘制图表
  },
  created() {
    this.getYearCount();
  },
  watch: {
    datay: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLineByYear();
      },
      deep: true,
    },
  },
  methods: {
    //查询所有年份的论文数量
    getYearCount(){
      yearCount().then(response => {
        console.log(response);
        //if (response.code == 200) {
          this.datay.length = 0; //清空数组
          for (let i = 0; i < response.data.length; i++) {
            this.datay.push(response.data[i]);
          }
          for (let i = 2010; i <2023; i++) {
            this.xdata.push(i);
          }
          console.log(this.datay);
        //}
      })
    },
    //画图的方法
    drawLineByYear() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("paperYearCount"));
      //2、构造图表数据
      let options = {
        title: {
          text: "论文2010-2022年数量分析",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          type: 'category',
          data : this.xdata,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.datay,
            type: "bar",
            label: {
              show: true,	// 是否可见
              position: 'top' 	// 旋转角度
            },

          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options,true);
    },

  },
};
</script>

<style scoped>

</style>
